<template>
  <div class="chat-container">
    <div class="chat_title">{{ user.userName }}</div>
    <div class="chat_content">
      <div ref="messageWin" class="chat_content-history">
        <div
          v-for="item in messageHistoryList"
          :key="item.timestamp"
          class="user-message"
          :class="{
            'my-message': item.position === 'right'
          }"
        >
          <div class="user-message-avatar">
            <el-avatar shape="square" class="avatar" :src="photo" />
          </div>
          <div class="user-message-content">
            <div v-if="item.position !== 'right'" class="user-message-username">
              {{ item.userName }}
            </div>
            <div class="user-message-message">{{ item.message }}</div>
          </div>
        </div>
      </div>
      <div class="chat_content-input">
        <textarea v-model="message" @keyup.enter="sendMessage" />
      </div>
      <el-button class="chat_send-button" type="success" size="small" @click="sendMessage"
        >发送</el-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, onUnmounted, nextTick } from 'vue'
import avatar from '@/assets/avatar.jpg'
import { scrollToBottom } from '@/utils/index.js'
const messageWin = ref(null)
const props = defineProps({
  user: {
    type: Object,
    defaults: () => {}
  }
})
const message = ref('')
const messageHistoryList = ref([])
const sendMessage = () => {
  if (!message.value.trim()) return

  window.ipcRenderer.invoke('send-udp-message', {
    message: message.value.trim(),
    address: props.user.address
  })

  messageHistoryList.value.push({
    userName: props.user.userName,
    message: message.value,
    position: 'right',
    timestamp: new Date().toISOString()
  })
  message.value = ''
  nextTick(() => {
    scrollToBottom(messageWin.value)
  })
}
// 处理接收到的UDP消息
const handleUDPMessage = (event, data) => {
  console.info(data)
  messageHistoryList.value.push({
    userName: props.user.userName,
    message: data.message,
    position: 'left',
    timestamp: new Date().toISOString()
  })
  nextTick(() => {
    scrollToBottom(messageWin.value)
  })
}
window.ipcRenderer.on('udp-message', handleUDPMessage)
onUnmounted(() => {
  window.ipcRenderer.removeListener('udp-message', handleUDPMessage)
})

const photo = ref(avatar)
</script>

<style lang="scss" scoped>
.chat-container {
  width: calc(100% - 180px);
  box-sizing: border-box;
}
.chat_title {
  height: 50px;
  line-height: 50px;
  padding-left: 20px;
}
.chat_content {
  border-top: 1px solid #c4c4c4;
  height: calc(100vh - 50px);
  position: relative;
  box-sizing: inherit;
}
.chat_content-history {
  height: calc(100vh - 180px);
  box-sizing: inherit;
  overflow-y: auto;

  .user-message {
    display: flex;
    padding: 6px;
    text-align: left;
    box-sizing: inherit;
    .user-message-avatar {
      width: 50px;
      height: 50px;
      padding: 10px;
      box-sizing: inherit;
      .avatar {
        height: 100%;
        width: 100%;
      }
    }
    .user-message-content {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-width: calc(100% - 100px);
      .user-message-username {
        font-size: var(--user-name-family-size);
      }
      .user-message-message {
        font-size: var(--user-message-family-size);
        padding: 4px;
        border-radius: 4px;
        background-color: #d8d8d8;
      }
    }
  }
  .my-message {
    flex-direction: row-reverse;
    text-align: right;
    .user-message-content {
      padding-top: 10px;
      align-items: flex-end;
      .user-message-message {
        text-align: left;
        background-color: #89d961;
      }
    }
  }
}
.chat_content-input {
  height: 130px;
  border-top: 1px solid #c4c4c4;
  box-sizing: inherit;
  textarea {
    outline: none;
    height: 80px;
    box-sizing: inherit;
    width: 100%;
    border: 0;
    resize: none;
    padding: 10px;
    font-family: var(--user-input-family);
    font-size: var(--user-name-family-size);
    text-align: justify;
  }
}
.chat_send-button {
  position: absolute;
  bottom: 10px;
  right: 20px;
}
</style>
